<template>
	<el-card shadow="hover">
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="1.5">
				<el-button @click="onAddClassification" type="primary" plain icon="el-icon-plus">添加分类</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="ID" align="center" prop="id" />
			<el-table-column label="分类名称" align="center" prop="name" />
			<el-table-column label="状态" align="center" prop="status">
				<template #default="scope">
					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="onChangeStatus(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column label="所属上级" align="center" prop="p_name">
				<template #default="scope">
					{{ scope.row.p_name ? scope.row.p_name : '---' }}
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button @click="onEditClassification(row)" type="text">修改</el-button>
					<el-button @click="onDeleteClassification(row)" type="text" style="color: #f56c6c">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<classification-add-dialog ref="classificationAddRef" />
		<classification-edit-dialog ref="classificationEditRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { goodsClassList, goodsClassDelete, goodsClassDisableEnable } from '/@/api/good/index';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import ClassificationAddDialog from './dialog/ClassificationAddDialog.vue';
import ClassificationEditDialog from './dialog/ClassificationEditDialog.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
export default {
	name: 'goodsClassification',
	components: { ClassificationAddDialog, ClassificationEditDialog },
	setup() {
		const state = reactive({
			uploadImgUrl: `${import.meta.env.VITE_API_URL}/admin/upload_organization_thumb`,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				goods_class_id: 0
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});

		const queryFormRef = ref(null);
		const classificationAddRef = ref(null);
		const classificationEditRef = ref(null);

		onMounted(() => {
			getList();
		});
		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		// 添加分类
		const onAddClassification = () => {
			(classificationAddRef.value as any)?.openDialog({}, () => getList());
		};
		//编辑分类
		const onEditClassification = (row: any) => {
			(classificationEditRef.value as any)?.openDialog({ goods_class_id: row.id }, () => getList());
		};
		//删除分类
		const onDeleteClassification = (row: any) => {
			ElMessageBox.confirm('您确定要删除此条商品分类?', '确认消息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					_goodsClassDelete({ goods_class_id: row.id });
				})
				.catch(() => {});
		};
		const onChangeStatus = (row: any) => {
			console.log(row.status, row.id);
			ElMessageBox.confirm(`是否确认${Number(row.status) == 1 ? '启用' : '禁用'}商品分类编号为${row.id}的数据项？`, '确认消息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					_goodsClassDisableEnable({ goods_class_id: row.id, status: row.status });
				})
				.catch(() => {
					row.status = row.status ? 0 : 1;
				});
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_goodsClassList(state.queryParams);
		};
		/**************************网络请求*****************************/
		//列表
		const _goodsClassList = (params: any) => {
			goodsClassList(params)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => (state.loading = false));
		};
		//删除分类
		const _goodsClassDelete = (params: any) => {
			goodsClassDelete(params)
				.then(() => {
					ElMessage.success('操作成功');
					getList();
				})
				.catch(() => {});
		};
		//启用或禁用
		const _goodsClassDisableEnable = (params: any) => {
			goodsClassDisableEnable(params)
				.then(() => {
					ElMessage.success('操作成功');
				})
				.catch(() => {});
		};

		return {
			queryFormRef,
			classificationAddRef,
			classificationEditRef,
			onQuery,
			onResetQuery,
			onAddClassification,
			onEditClassification,
			onDeleteClassification,
			onChangeStatus,
			getList,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
